﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
@using FastCodeGeneration.Entity
@model List<FastCodeGeneration.Entity.Project>
<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link href="~/lib/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />
    <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet" />
    <link href="~/lib/eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet" />
    <link href="~/css/bootstrap-admin.css" rel="stylesheet" />
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>

<body class="bg-body-tertiary py-3">

    <div class="container-fluid">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-body search-area">
                <form class="row row-cols-sm-auto g-3 py-2 align-items-center">
                    <div class="col-12">
                        <div class="row">
                            <label for="name" class="col-sm-auto col-form-label">模块</label>
                            <div class="col">
                                <input type="text" class="form-control" id="name" name="name">
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="row">
                            <label for="projectId" class="col-sm-auto col-form-label">项目</label>
                            <div class="col">
                                <select class="selectpicker" id="projectId" name="projectId">
                                    @foreach (var item in Model)
                                    {
                                        <option value="@item.Id">@item.Name</option>
                                    }
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 gap-2">
                        <button type="button" class="btn btn-light bsa-querySearch-btn">
                            <i class="bi bi-search"></i>搜索
                        </button>
                        <button type="button" class="btn btn-light bsa-reset-btn">
                            <i class="bi bi-arrow-clockwise"></i>重置
                        </button>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <!--  表格上方左侧的工具条区域    -->
                <div id="toolbar" class="d-flex flex-wrap gap-2 mb-2">
                    <button class="btn btn-light add-btn">
                        <i class="bi bi-plus"></i> 新增
                    </button>
                </div>
                <!--  数据表格    -->
                <table id="table"></table>
            </div>
        </div>
    </div>
    <!--回到顶部开始-->
    <a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
    <!--回到顶部结束-->

    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/popperjs/core/dist/umd/popper.min.js"></script>
    <script src="~/lib/eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js"></script>
    <script src="~/lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="~/lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="~/lib/bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
    <script src="~/lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
    <script src="~/lib/bootstrap-select/dist/js/i18n/defaults-zh_cn.min.js"></script>
    <script src="~/js/bootstrap-admin.js"></script>
    <script src="~/js/QueryWrapper.js"></script>
    <script src="~/js/app.js"></script>

    <script>
        $(document).ready(function () {
            // 新增
            $('.add-btn').on('click', function () {
                // window :建议加上该前缀,否则在子页面中通过parent.modalInstance 获取不到该实例对象,因为它现在处于一个匿名函数里
                window.modalInstance = $.modal({
                    url: '/Module/AddOrEdit',
                    title: '模板添加',
                    //禁用掉底部的按钮区域
                    buttons: [],
                    modalDialogClass: 'modal-dialog-centered modal-lg',
                    onHidden: function (obj, data) {
                        if (data === true) {
                            //刷新当前数据表格
                            $('#table').bootstrapTable('refresh');
                            $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
                        }
                    }
                })
            })

            /**
             * columns表示列，里面的对象 title是表头信息，field是服务端返回的字段名称
             * 1.不做分页，返回的数据格式是 [{},{}]
             * 2.如果要开启分页，需要配置pagination:true, sidePagination:'client|server'
             * 3.客户端分页所需要的格式和不做分页时是一样的 都是 :[{},{}]
             * 4.服务端分页返回的格式为：{rows:[{},{}],total:200}
             * 参考：https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json
             */
            $('#table').bootstrapTable({
                //配置语言
                locale: 'zh-CN',
                striped: true, //是否显示行间隔色
                //设置高度就可以固定表头
                // height: 500,
                //请求地址
                url: '/Module/GetCondition',
                responseHandler: function (res) {
                    return {
                        "total": res.totalCount,
                        "rows": res.records
                    };

                },
                //固定列功能开启
                fixedColumns: true,
                //左侧固定列数
                fixedNumber: 1,
                //右侧固定列数
                fixedRightNumber: 1,
                //是否开启分页
                pagination: true,
                //是客户端分页还是服务端分页  'client','server',由于演示没有后端提供服务，所以采用前端分页演示
                sidePagination: 'server',
                // 初始化加载第一页，默认第一页
                pageNumber: 1,
                //默认显示几条
                pageSize: 10,
                //可供选择的每页的行数 - (亲测大于1000存在渲染问题)
                pageList: [10, 25, 50, 100],
                //在上百页的情况下体验较好 - 能够显示首尾页
                paginationLoop: true,
                // 展示首尾页的最小页数
                paginationPagesBySide: 2,
                // 唯一ID字段
                uniqueId: 'id',
                // 每行的唯一标识字段
                idField: 'id',
                // 是否启用点击选中行
                clickToSelect: true,
                // 是否显示详细视图和列表视图的切换按钮
                showToggle: true,
                // 请求得到的数据类型
                dataType: 'json',
                // 请求方法
                method: 'get',
                // 工具按钮容器
                toolbar: '#toolbar',
                // 是否显示所有的列
                showColumns: true,
                // 是否显示刷新按钮
                showRefresh: true,
                // 显示图标
                showButtonIcons: true,
                // 显示文本
                showButtonText: false,
                // 显示全屏
                showFullscreen: false,
                // 开关控制分页
                showPaginationSwitch: false,
                // 当字段为 undefined 显示
                undefinedText: '-',
                // 排序方式
                sortOrder: "asc",
                // 按钮的类
                buttonsClass: 'light',
                // 类名前缀
                buttonsPrefix: 'btn',
                // 图标前缀
                iconsPrefix: 'bi',
                // 图标大小 undefined sm lg
                iconSize: undefined,
                // 图标的设置  这里只做了一个演示，可设置项目参考 https://examples.bootstrap-table.com/#options/table-icons.html
                icons: {
                    fullscreen: 'bi-arrows-fullscreen',
                },
                //加载模板,不改的话，默认的会超出不好看
                loadingTemplate: function () {
                    return '<div class="spinner-grow" role="status"><span class="visually-hidden">Loading...</span></div>';
                },
                onPostBody: function () {
                    //重新启用弹出层,否则formatter格式化函数返回的html字符串上的tooltip提示不生效
                    $('[data-bs-toggle="tooltip"]').each(function (i, el) {
                        new bootstrap.Tooltip(el)
                    })
                },
                onLoadSuccess: function () {
                    //重新启用弹出层,否则formatter格式化函数返回的html字符串上的tooltip提示不生效
                    $('[data-bs-toggle="tooltip"]').each(function (i, el) {
                        new bootstrap.Tooltip(el)
                    })
                },
                //params是一个对象
                queryParams: function (params) {
                    let name = $('#name').val();
                    let projectId = $('#projectId').val();
                    const wrapper = new QueryWrapper((params.offset / params.limit) + 1, params.limit);
                    if (name) {
                        wrapper.like("name", name);
                    }
                    if (projectId && projectId !== '0') {
                        wrapper.eq("ProjectId", projectId)
                    }
                    return wrapper.getQueryObject();
                },
                //列
                columns: [
                    {
                        checkbox: true, visible: true,
                    },
                    {
                        title: 'ID', field: 'id', align: 'center', sortable: true, sortName: 'id', switchable: false, width: 8, widthUnit: 'rem'
                    },
                    {
                        title: '项目名', field: 'projectName', align: 'center'
                    },
                    {
                        title: '模块名', field: 'name', align: 'center'
                    },
                    {
                        title: '表前缀', field: 'tablePrefix', align: 'center'
                    },
                    {
                        title: '模块目录', field: 'modulePath', align: 'center'
                    },
                    {
                        title: '生成的文件是否忽略表前缀', field: 'fileIgnorePrefix', align: 'center'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: formatAction,
                        events: {
                            'click .edit-btn': function (event, value, row, index) {
                                event.stopPropagation();
                                window.modalInstance = $.modal({
                                    url: '/Module/AddOrEdit/' + row.id,
                                    title: '项目编辑',
                                    //禁用掉底部的按钮区域
                                    buttons: [],
                                    modalDialogClass: 'modal-dialog-centered modal-lg',
                                    onHidden: function (obj, data) {
                                        if (data === true) {
                                            //刷新当前数据表格
                                            $('#table').bootstrapTable('refresh');
                                            $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
                                        }
                                    }
                                })

                            },
                            'click .del-btn': function (event, value, row, index) {
                                event.stopPropagation();
                                $.modal({
                                    body: '确定要删除' + row.name + '?',
                                    ok: function () {
                                        $.ajax({
                                            url: '/user/10',
                                            method: 'delete',
                                        }).then(response => {
                                            if (response.code === 200) {
                                                $.toasts({
                                                    type: 'success',
                                                    content: '删除成功',
                                                    onHidden: function () {
                                                        //刷新当前数据表格
                                                        $('#table').bootstrapTable('refresh');
                                                        $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
                                                    }
                                                })
                                            }
                                        });

                                    }
                                })

                            }
                        }
                    }
                ]
            });
            //格式化列数据演示 val:当前数据 rows:当前整行数据
            function formatAction(val, rows) {
                let html = '';
                //第一个按钮(你可以在这里判断用户是否有修改权限来决定是否显示)
                html += `<button type="button" class="btn btn-light btn-sm edit-btn" data-bs-toggle="tooltip" data-bs-placement="top"
                                                                                                                        data-bs-title="修改"><i class="bi bi-pencil"></i></button>`;

                html += `<button type="button" class="btn btn-light mx-1 btn-sm del-btn" data-bs-toggle="tooltip" data-bs-placement="top"
                                                                                                                        data-bs-title="删除"><i class="bi bi-trash3"></i></button>`
                return html;
            }

            //搜索处理
            $('.bsa-querySearch-btn').on('click', function () {
                $('#table').bootstrapTable('refresh');
                $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
            })

            //重置处理
            $('.bsa-reset-btn').on('click', function () {
                //把所有的字段都恢复默认值
                $('#username').val('');
                //刷新回到第一页
                $('#table').bootstrapTable('refresh');
                $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
            })

        });
    </script>

</body>
</html>
